<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center under-line") ----菜单设置----
            div(class="flex-column-item flex-row",
                v-for="(item) in currentPage",
                :class="{'selected-text': item.name == currentItem.name ? true: false}")
                div(class="flex-row-item",:class="{'flex-3': item.isLast ? false:true}") {{item.name}}
                div(class="flex-row-item right")
                    span {{item.value.name}}
                    span(v-if="item.attachUnit") {{item.unit}}
        control-select(v-model="currentItem",:visible="visible",ref="selector",v-if="!currentItem.isControlAmount")
        control-amount(v-model="currentItem",:visible="visible",ref="amountControl",v-else)
</template>

<script>
    import dayjs from 'dayjs'

    export default {
        data() {
            return {
                items: [
                    {
                        name: "1.大剂量限量",
                        isControlAmount: true,
                        max: 88,
                        min: 7,
                        increment: 1,
                        unit: "U",
                        value: window.advance.doseLimit,
                        attachUnit: true,
                        onChange(model) {
                            window.advance.doseLimit = model.value;
                        }
                    },
                    {
                        name: "2.日总量限量:",
                        value: window.advance.dayDoseLimit,
                        isControlAmount: true,
                        max: 250,
                        min: 0,
                        increment: 5,
                        unit: "U",
                        attachUnit: true,
                        onChange(model) {
                            window.advance.dayDoseLimit = model.value;
                        }
                    },
                    {
                        name: "3.基础限量:",
                        value: window.advance.baseLimit,
                        isControlAmount: true,
                        max: 10,
                        min: 1,
                        increment: 1,
                        unit: "U",
                        attachUnit: true,
                        onChange(model) {
                            window.advance.baseLimit = model.value;
                        }
                    },
                    {
                        name: "4.堵塞量:",
                        value: window.advance.blockAmount,
                        options: [
                            {name: "极多", value: "极多"},
                            {name: "多", value: "多"},
                            {name: "极少", value: "极少"},
                            {name: "少", value: "少"}
                        ],
                        attachUnit: true,
                        onChange(model) {
                            window.advance.blockAmount = model.value;
                        }
                    },
                    {
                        name: "5.药物浓度:",
                        value: window.advance.medicalStrength,
                        options: [
                            {name: "U100", value: "U100"},
                            {name: "U40", value: "U40"}
                        ],
                        attachUnit: true,
                        onChange(model) {
                            window.advance.medicalStrength = model.value;
                            // 需要记录变更
                            window.advance.medical_strenth_change_info = {modify_at: new Date(), value: model.value.value}
                        }
                    },
                    {
                        isLast: true,
                        name: "6.时差:",
                        value: window.advance.timeDiff,
                        isControlAmount: true,
                        max: 9,
                        min: -9,
                        increment: 1,
                        unit: "小时",
                        attachUnit: true,
                        onChange(model) {
                            window.advance.timeDiff = model.value;
                        }
                    }
                ],
                visible: false,
                currentItem: null,
                currentItemIndex: 0,
                page: {pageIndex: 1, pageSize: 3}
            };
        },
        computed: {
            currentPage() {
                var currentPage = [0, 1, 2].indexOf(this.currentItemIndex) === -1 ? 2 : 1;
                var start = (currentPage - 1) * this.page.pageSize;
                var end = start + this.page.pageSize;

                return this.items.slice(start, end);
            }
        },
        methods: {
            up() {
                if (this.visible) {
                    var ref = this.currentItem.isControlAmount
                        ? this.$refs.amountControl
                        : this.$refs.selector;
                    ref.up();
                    return;
                }

                this.currentItemIndex =
                    this.currentItemIndex == 0 ? 5 : this.currentItemIndex - 1;
                this.currentItem = this.items[this.currentItemIndex];
            },
            down() {
                if (this.visible) {
                    var ref = this.currentItem.isControlAmount
                        ? this.$refs.amountControl
                        : this.$refs.selector;
                    ref.down();
                    return;
                }

                //   var index = this.currentItemIndex;

                this.currentItemIndex =
                    this.currentItemIndex == 5 ? 0 : this.currentItemIndex + 1;
                this.currentItem = this.items[this.currentItemIndex];
            },

            back() {
                if (this.visible) {
                    this.visible = !this.visible;
                } else {
                    this.$router.push("/advance-setting?index=2");
                }
            },
            yes() {
                this.visible = !this.visible;
            }
        },
        created() {
            this.currentItem = this.items[0];
        }
    };
</script>

<style lang="less">
</style>
